<script lang="ts" setup>
import { Icon } from "@iconify/vue";

defineOptions({
  name: "MenuLeft",
});

withDefaults(
  defineProps<{
    buttons: {
      btnType: string;
      text: string;
      icon: string;
      type?: "" | "text" | "default" | "primary" | "success" | "warning" | "info" | "danger";

      plain?: boolean;
    }[];
  }>(),
  {}
);
const emit = defineEmits<{
  "click-btn": [btnType: string];
}>();

onMounted(() => {
  // console.log(props.buttons);
});

const onClick = (btnType: string) => {
  emit("click-btn", btnType);
};
</script>
<template>
  <div>
    <el-button
      v-for="item in buttons"
      :key="item.btnType"
      :plain="item.plain"
      :type="item.type ?? 'primary'"
      @click="onClick(item.btnType)"
    >
      <template #icon>
        <Icon :icon="item.icon"></Icon>
      </template>
      {{ item.text }}
    </el-button>
    <slot></slot>
  </div>
</template>
<style lang="scss" scoped></style>
